<template>
  <div class="tab_home" style="background: #ffffff">
    <!-- in shopInfos.choicenessList -->
    <!-- banner  暂定高230  宽100% -->

    <van-swipe :autoplay="3000" indicator-color="white" class="banner">
      <van-swipe-item
        v-for="(banner, index) in shopInfos.bannerList"
        :key="index"
      >
        <div class="topback"></div>
        <div class="bottomback"></div>
        <img :src="banner.url" @click="redirectTo(banner.link)" />
      </van-swipe-item>
    </van-swipe>

    <!-- 行业咨询动态 -->
    <article ref="bigox" style="margin: auto">
      <van-row class="titall" style="">
        <van-col style="background: #ffffff; width: 100%; padding: 15px 0">
          <span
            style="
              padding: 5px 15px;
              background: #45b6f3;
              color: #ffffff;
              text-align: center;
              border-top-right-radius: 50px;
              border-bottom-right-radius: 50px;
              font-size: 16px;
            "
          >
            {{ tabtitle }}资讯动态
          </span>
        </van-col>
      </van-row>

      <ul
        style="
          display: flex;
          background: #ffffff;
          justify-content: space-between;
          flex-wrap: wrap;
          padding: 14px 10px;
        "
      >
        <li style="width: 100%">
          <div class="function">
            <van-row style="">
              <van-col
                span="6"
                @click="domain(vlu.officialUrl)"
                :style="index % 4 == 0 && index != 0 ? 'margin-top:15px' : null"
                v-for="(vlu, index) in painting"
                :key="index"
              >
                <div>
                  <img v-lazy="vlu.image" alt="" style="width: 3rem" />
                  <!-- <van-icon style :name="vlu.image" size="60" /> -->
                  <br />
                  <span>{{ vlu.name }}</span>
                </div>
              </van-col>
            </van-row>
          </div>
        </li>
      </ul>
    </article>

    <!-- 喷喷涂涂网互动 -->
    <article ref="bigox" style="margin: auto">
      <van-row class="titall" style="">
        <van-col style="background: #ffffff; width: 100%; padding: 15px 0">
          <span
            style="
              padding: 5px 15px;
              background: #45b6f3;
              color: #ffffff;
              text-align: center;
              border-top-right-radius: 50px;
              border-bottom-right-radius: 50px;
              font-size: 16px;
            "
          >
            {{ tabtitle }}产品服务
          </span>
        </van-col>
      </van-row>

      <ul
        style="
          display: flex;
          background: #ffffff;
          justify-content: space-between;
          flex-wrap: wrap;
          padding: 14px 10px;
        "
      >
        <li style="width: 100%">
          <div class="function">
            <van-row style="">
              <van-col
                span="6"
                @click="domain(vlu.officialUrl)"
                :style="index % 4 == 0 && index != 0 ? 'margin-top:15px' : null"
                v-for="(vlu, index) in interaction"
                :key="index"
              >
                <div>
                  <img v-lazy="vlu.image" alt="" style="width: 3rem" />
                  <!-- <van-icon style :name="vlu.image" size="60" /> -->
                  <br />
                  <span>{{ vlu.name }}</span>
                </div>
              </van-col>
            </van-row>
          </div>
        </li>
      </ul>
    </article>

    <!-- 广告 -->
    <div @click="redirectTo(warmSpringLink)" style="width: 100%">
      <van-image width="100%" fit="contain" :src="warmSpringGif" />
    </div>

    <!-- 工程发包 -->
    <article class="article" ref="bigox" style="">
      <van-row class="titall" style="margin-top: 13px">
        <van-col class="titlering" style="background: #f2f1f6">
          <div
            class="titext"
            style="float: left; display: flex; align-items: center"
          >
            <img :src="pensoli" alt="" style="width: 16px; height: 16px" />
            <span style="display: block; float: left; margin-left: 6px">
              工程发包</span
            >
            <span
              style="
                font-weight: 500;
                color: #f34f43;
                font-size: 12px;
                margin-left: 5px;
                display: block;
                float: left;
              "
              >90%的人在这里接活</span
            >
          </div>
        </van-col>
      </van-row>

      <div
        v-for="(item, index) in project.data.slice(0, 5)"
        :key="index"
        :style="index == 0 ? 'padding-top:15px' : null"
        :title="item"
      >
        <van-row
          style="padding-top: 15px; padding: 0 15px"
          @click="domain('/info/project')"
        >
          <van-col style="position: relative">
            <img
              :src="getSrc(item, index)"
              style="object-fit: cover; border-radius: 4px"
              height="87px"
              width="87px"
            />
          </van-col>
          <van-col
            style="
              width: calc(100% - 100px);
              height: 87px;
              padding-left: 15px;
              display: flex;
              flex-direction: column;
            "
          >
            <div style="flex: 1">
              <van-cell
                :title="item.title"
                label-class="item"
                title-class="title"
                :label="item.detail"
              ></van-cell>
            </div>
            <div class="cell-div">
              <van-row type="flex" align="center" style="margin-top: 5px">
                <van-col>
                  <van-tag text-color="#fff" size="large" class="tag-blue">{{
                    getHasWkType(item.workType[0])
                  }}</van-tag>
                  <van-tag
                    text-color="#fff"
                    size="large"
                    class="tag-blue"
                    style="margin-left: 3px"
                    v-if="getHasWkType(item.workType[1]) != null"
                    >{{ getHasWkType(item.workType[1]) }}</van-tag
                  >
                </van-col>
              </van-row>
              <van-row
                type="flex"
                align="bottom"
                justify="space-between"
                style="margin-top: 3px; margin-left: 1px"
              >
                <van-col>
                  <slot v-if="item.city && item.city.length > 6">
                    <span class="cell-span">{{
                      item.city.substring(0, 6) + '...'
                    }}</span>
                  </slot>
                  <slot v-else>
                    <span class="cell-span">{{ item.city || '地区未知' }}</span>
                  </slot>
                </van-col>
                <van-col>
                  <span style="color: #ee3f00; margin-right: 3px">{{
                    item.staff
                  }}</span>
                  <span class="cell-span">人</span>
                </van-col>
                <van-col>
                  <span class="cell-span">{{
                    item.updateTime.substring(0, 10)
                  }}</span>
                </van-col>
              </van-row>
            </div>
          </van-col>
        </van-row>
        <van-divider
          :style="{
            color: 'rgba(187, 187, 187, 0.38)',
            borderColor: 'rgba(187, 187, 187, 0.38)',
            padding: '5px 16px 0px 16px',
          }"
        ></van-divider>
      </div>
      <p
        @click="domain('/info/project')"
        style="
          width: 50%;
          padding: 6px 0;
          border: 1px solid #eaeaea;
          text-align: center;
          margin: 13px auto;
          border-radius: 20px;
        "
      >
        点击查看更多信息
      </p>
    </article>

    <!-- 万师傅 -->
    <article class="article" ref="bigox" style="margin: auto">
      <van-row class="titall" style="margin-top: 13px">
        <van-col class="titlering" style="background: #f2f1f6">
          <div
            class="titext"
            style="float: left; display: flex; align-items: center"
          >
            <img :src="wanshifu" alt="" style="width: 16px; height: 16px" />
            <span
              style="
                display: block;
                float: left;
                line-height: 2.5rem;
                margin-left: 6px;
              "
            >
              万师傅在线</span
            >
            <span
              style="
                font-weight: 500;
                color: #ffa123;
                font-size: 12px;
                margin-left: 5px;
                display: block;
                float: left;
              "
              >啥活都能干</span
            >
          </div>
          <!-- <div style="padding-right: 3%" @click="redirectTo('/contract')">
            <span>全部</span> &nbsp;
            <van-icon name="arrow" size="16" color="black" />
          </div> -->
        </van-col>
      </van-row>
      <!-- 实名认证 -->
      <ul style="display: flex; flex-direction: column; padding-top: 5px">
        <li
          :style="{
            background: `url(${firstpiu}) no-repeat`,
            backgroundSize: '100% 100%',
          }"
          v-for="(item, index) in workerlist"
          :key="index"
          @click="domain('/contract')"
          style="padding-bottom: 16px; padding-top: 10px; margin-top: 10px"
        >
          <aside
            class="left"
            :style="{
              backgroundImage: `url(${
                !item.headPortrait ? bei[index] : item.headPortrait
              })`,
              marginLeft: '12px',
            }"
          ></aside>

          <ul
            class="right"
            style="display: flex; flex-wrap: wrap; align-content: space-between"
          >
            <li style="display: flex; flex-direction: row">
              <p v-if="item.state == true">
                <span style="align-items: center; margin-top: 3px"
                  >{{ String(item.name).slice(0, 1) }}师傅</span
                >
              </p>
              <p>
                <span
                  style="
                    margin-left: 5px;
                    font-size: 10px;
                    color: white;
                    background: #f09032;
                    padding: 1px 2px;
                    border-radius: 2px;
                  "
                  >已实名</span
                >
              </p>
              <p
                v-if="item.state == false"
                style="display: flex; align-items: center"
              >
                <span
                  style="
                    font-size: 14px;
                    margin-left: 3px;
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                  "
                  >{{ item.name }}</span
                >
              </p>
              <p
                style="
                  display: flex;
                  font-size: 0.6rem;
                  color: #7e7b7b;
                  margin-left: 10px;
                  align-items: center;
                "
              >
                <span></span>
              </p>
            </li>
            <li
              style="display: flex; justify-content: space-between; width: 77%"
            >
              <p
                style="
                  flex: 1;
                  font-size: 12px;
                  color: rgb(150, 151, 153);
                  overflow: hidden;

                  line-clamp: 1;
                  display: -webkit-box;
                  white-space: nowrap;
                  text-overflow: ellipsis;
                "
              >
                {{ item.sex == 1 ? '男' : '女' }}
              </p>
              <p
                style="
                  flex: 1;
                  font-size: 12px;
                  color: rgb(150, 151, 153);
                  overflow: hidden;

                  line-clamp: 1;
                  display: -webkit-box;
                  white-space: nowrap;
                  text-overflow: ellipsis;
                "
              >
                {{ item.age }}岁
              </p>

              <p
                style="
                  flex: 1;
                  font-size: 12px;
                  color: rgb(150, 151, 153);
                  overflow: hidden;

                  line-clamp: 1;
                  padding-right: 25px;
                  display: -webkit-box;
                  white-space: nowrap;
                  text-overflow: ellipsis;
                "
              >
                {{ item.workHour }}
              </p>
            </li>
            <li style="display: flex; align-items: center">
              <div style="font-size: 14px">
                <van-tag
                  v-for="(vale, index) in item.workType.slice(0, 2)"
                  :class="index != 0 ? 'marle' : 'tag'"
                  :key="index"
                  v-if="vale.length > 0"
                  color="#c09852"
                >
                  {{ vale }}
                </van-tag>
              </div>
            </li>
          </ul>
        </li>
        <li style="width: 100%; padding-top: 5px">
          <p
            @click="domain('/contract')"
            style="
              width: 50%;
              padding: 6px 0;
              border: 1px solid #eaeaea;
              text-align: center;
              margin: 13px auto;
              border-radius: 20px;
            "
          >
            点击查看更多信息
          </p>
        </li>
      </ul>
    </article>

    <!-- 施工找活 -->
    <!-- <article class="article" ref="bigox" style="margin: auto">
      <van-row class="titall" style="margin-top: 13px">
        <van-col class="titlering" style="background: #f2f1f6">
          <div
            class="titext"
            style="float: left; display: flex; align-items: center"
          >
            <img :src="takejob" alt="" style="width: 16px; height: 16px" />
            <span
              style="
                display: block;
                float: left;
                line-height: 2.5rem;
                margin-left: 6px;
              "
            >
              施工找活</span
            >
            <span
              style="
                font-weight: 500;
                color: #7f5beb;
                font-size: 12px;
                margin-left: 5px;
                display: block;
                float: left;
              "
            ></span>
          </div>
           <div style="padding-right: 3%" @click="redirectTo('/info/workers')">
            <span>全部</span> &nbsp;
            <van-icon name="arrow" size="16" color="black" />
          </div> 
        </van-col>
      </van-row>

      未实名 
      <ul
        style="
          display: flex;
          flex-direction: column;
          padding-top: 3px;
          padding-bottom: 4px;
        "
      >
        <li
          v-for="(item, index) in projectlister"
          :key="index"
          @click="domain('/info/workers')"
          :style="
            index == projectlister.length - 1
              ? 'border:none'
              : 'border-bottom: 1px solid #eaeaea;'
          "
          style="padding: 10px 5px; display: flex"
        >
          <aside class="left" style="width: 87px">
            <div style="width: 87px; height: 87px">
              <img
                :src="!item.images[0] ? bei[index] : item.images[0]"
                alt=""
                style="width: 87px; height: 87px; border-radius: 4px"
              />
            </div>
          </aside>

          <ul class="right" style="width: 69%; padding-left: 15px">
            <li style="display: flex; flex-direction: row">
              <p style="display: flex">
                <span
                  style="
                    font-size: 14px;
                    overflow: hidden;
                    width: 100%;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                  "
                  >{{ item.title }}</span
                >
              </p>
              <p
                style="
                  display: flex;
                  font-size: 0.6rem;
                  color: #7e7b7b;
                  margin-left: 10px;
                  align-items: center;
                "
              >
                <span></span>
              </p>
            </li>
            <li style="display: flex; width: 100%">
              <p
                style="
                  font-size: 12px;
                  overflow: hidden;
                  color: #969799;
                  line-clamp: 1;
                  width: 100%;
                  white-space: nowrap;
                  text-overflow: ellipsis;
                "
              >
                {{ item.detail }}
              </p>
            </li>
            <li style="display: flex; align-items: center">
              <div style="font-size: 14px">
                <van-tag
                  v-for="(vale, index) in item.workType.slice(0, 2)"
                  :key="index"
                  :class="index != 0 ? 'marlet' : 'tagt'"
                  color="rgba(29, 90, 232, 0.1)"
                  v-if="vale.length > 0"
                >
                  {{ vale }}
                </van-tag>
              </div>
            </li>
          </ul>
          <!-- <aside
            v-if="item.state == true"
            class="asideright"
            style="
              width: 15%;
              height: 40%;
              text-align: center;
              margin-top: 10px;
            "
          >
            <img :src="Realname" alt="" width="100%" height="100%" style="" />
          </aside> 
        </li>
        <li style="width: 100%">
          <p
            @click="domain('/info/workers')"
            style="
              width: 50%;
              padding: 6px 0;
              border: 1px solid #eaeaea;
              text-align: center;
              margin: 13px auto;
              border-radius: 20px;
            "
          >
            点击查看更多信息
          </p>
        </li>
      </ul>
    </article> -->

    <!-- 金牌会员 -->
    <article class="article">
      <van-row class="titall" style="margin-top: 13px">
        <van-col class="titlering" style="background: #f2f1f6">
          <div
            class="titext"
            style="float: left; display: flex; align-items: center"
          >
            <img :src="medal" alt="" style="width: 18px; height: 18px" />
            <span
              style="
                display: block;
                float: left;
                line-height: 2.5rem;
                margin-left: 6px;
              "
            >
              会员专享</span
            >
            <span
              style="
                font-weight: 500;
                color: #ff8c10;
                font-size: 12px;
                margin-left: 5px;
                display: block;
                float: left;
              "
              >厂家直供，便宜多多</span
            >
          </div>
          <!-- <div
            style="padding-right: 3%"
            @click="$router.push({ path: '/items/members-zone' })"
          >
            <span>全部</span> &nbsp;
            <van-icon name="arrow" size="16" color="black" />
          </div> -->
        </van-col>
      </van-row>
      <ul style="padding-top: 10px">
        <li
          v-for="(item, index) in membersGoods.data.slice(0, 5)"
          :key="index"
          @click="$router.push(`/items/members-zone/2`)"
          style="margin: 15px 0; background: #fceaba; border-radius: 5px"
        >
          <!-- $router.push(`/info/used-detail/${item.id}`) -->
          <aside
            class="left"
            :style="{
              backgroundImage: `url(${item.gallery[0]})`,

              borderRadius: '4px',
              width: '87px',
              height: '87px',
              marginTop: '0px',
            }"
          ></aside>
          <ul class="right" style="position: relative; margin: 10px 0">
            <li style="">
              <span
                style="
                  font-size: 14px;
                  position: absolute;
                  width: 170px;
                  overflow: hidden;
                  white-space: nowrap;
                  text-overflow: ellipsis;
                "
                >{{ item.name }}</span
              >
            </li>
            <!-- <li>
              <div class="cont4"></div>
            </li> -->
            <li style="display: flex">
              <div class="cont5" style="font-size: 14px; margin-top: 17px">
                {{ (item.retailPrice * 100) | yuan }}
                <!-- <span> {{ (item.memberPrice * 100) | yuan }}</span>
                <span
                  style="
                    color: #fccc00;
                    margin-left: 5px;
                    background: black;
                    line-height: 15px;
                    font-size: 9px;
                    height: 15px;
                    padding: 0px 4px;
                    border-radius: 25px;
                    transform: scale(1);
                    transform-origin: 0 0;
                    display: inline-block;
                  "
                >
                  会员价
                </span> -->
              </div>
            </li>
            <!-- <li style="display: flex; flex-direction: row">
              <p
                style="
                  flex: 1;
                  margin-top: 4px;
                  font-size: 12px;
                  color: rgb(166, 168, 181);
                "
              ></p>
            </li> -->
          </ul>
        </li>
        <li style="width: 100%">
          <p
            @click="btnrou('/items/members-zone/2')"
            style="
              width: 50%;
              padding: 6px 0;
              border: 1px solid #eaeaea;
              text-align: center;
              margin: 7px auto;
              margin-bottom: 13px;
              border-radius: 20px;
            "
          >
            点击查看更多产品
          </p>
        </li>
      </ul>
    </article>

    <!-- 服务网点 -->
    <article class="article" ref="bigox" style="">
      <van-row class="titall" style="margin-top: 13px">
        <van-col class="titlering" style="background: #f2f1f6">
          <div
            class="titext"
            style="float: left; display: flex; align-items: center"
          >
            <img :src="wdfw" alt="" style="width: 16px; height: 16px" />
            <span style="display: block; float: left; margin-left: 6px">
              工具设备使用服务体验店</span
            >
            <span
              style="
                font-weight: 500;
                color: #0a65fc;
                font-size: 12px;
                margin-left: 5px;
                display: block;
                float: left;
              "
              >工厂直营店</span
            >
          </div>
        </van-col>
      </van-row>
      <ul v-for="(item, index) in roject.data.slice(0, 5)" :key="index">
        <li @click="btnrou('/merchant/merchant-list')" style="padding: 10px 0">
          <aside
            class="left"
            style="width: 87px; height: 87px"
            :style="{
              backgroundImage: `url(${
                item.shopLogo ? item.shopLogo : bei[index]
              })`,
            }"
          ></aside>
          <ul class="right" style="">
            <li
              style="
                width: 100%;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                height: auto;
              "
            >
              {{ item.shopName }}
            </li>

            <li style="width: 100%; height: auto">
              <span
                style="
                  color: rgb(150, 151, 153);
                  font-size: 12px;
                  overflow: hidden;
                  display: -webkit-box;
                  text-overflow: ellipsis;
                  -webkit-line-clamp: 2;
                  -webkit-box-orient: vertical;
                "
              >
                <span style="color: #1d5ae8"></span>
                {{ item.subTitle }}</span
              >
            </li>
            <li style="width: 100%; height: auto">
              <span
                style="
                  text-align: center;
                  flex-shrink: 0;
                  width: auto;
                  border-radius: 4px;
                  font-size: 12px;
                  padding: 2.5px 2px;
                "
                :style="index != 0 ? 'margin-left:4px;' : null"
                v-for="(ite, index) in item.keywords"
                :key="index"
                class="tag-blue"
                >{{ ite }}</span
              >
            </li>
          </ul>
        </li>

        <!-- 小dmo分割线 -->
        <van-divider
          :style="{
            margin: '0',
            color: 'rgba(187, 187, 187, 0.38)',
            borderColor: 'rgba(187, 187, 187, 0.38)',
            padding: '5px 16px 0px 16px',
          }"
        ></van-divider>
      </ul>

      <div style="width: 100%; padding-bottom: 10px; margin-top: 19px">
        <p
          @click="btnrou('/merchant/merchant-list')"
          style="
            width: 50%;
            padding: 6px 0;
            border: 1px solid #eaeaea;
            text-align: center;
            margin: 7px auto;
            margin-bottom: 13px;
            border-radius: 20px;
          "
        >
          点击查看更多信息
        </p>
      </div>
    </article>

    <!-- 租赁市场 -->
    <article class="article">
      <van-row class="titall" style="margin-top: 13px">
        <van-col class="titlering" style="background: #f2f1f6">
          <div
            class="titext"
            style="float: left; display: flex; align-items: center"
          >
            <img :src="lease" alt="" style="width: 16px; height: 16px" />
            <span style="display: block; float: left; margin-left: 6px">
              工具设备出租</span
            >
            <span
              style="
                font-weight: 500;
                color: #309859;
                font-size: 12px;
                margin-left: 5px;
                display: block;
                float: left;
              "
              >短期租用施工更方便</span
            >
          </div>
          <!-- <div style="padding-right: 3%" @click="redirectTo('/info/used')">
            <span>全部</span> &nbsp;
            <van-icon name="arrow" size="16" color="black" />
          </div> -->
        </van-col>
      </van-row>

      <ul>
        <!-- 租赁模块 -->
        <li
          v-for="(item, inex) in listent"
          :key="item.id"
          @click="domain('/info/rent')"
          style="padding: 15px 0"
          :class="inex != listent.length - 1 ? 'bottr' : null"
        >
          <!-- $router.push(`/info/rent-detail/${item.id}`) -->
          <aside
            class="left"
            :style="{
              backgroundImage: `url(${
                item.images[0] == undefined ? bei[inex] : item.images[0]
              })`,
              backgroundColor: !item.images[0] ? '#1E7BF4' : '',
              borderRadius: '4px',
              width: '87px',
              height: '87px',
            }"
          ></aside>
          <ul class="right">
            <li style="display: flex">
              <span
                :style="{
                  background:
                    item.userType == '平台'
                      ? '#86d1a4'
                      : item.userType == '门店'
                      ? '#94abe0'
                      : item.userType == '个人'
                      ? '#f4a97c'
                      : '',
                }"
                style="
                  font-size: 12px;
                  display: flex;
                  align-items: center;
                  color: white;
                  padding: 2px 3px;
                  border-radius: 2px;
                "
              >
                {{ item.userType == undefined ? '待审' : item.userType }}</span
              >

              <span
                style="
                  font-size: 14px;
                  margin-left: 5px;
                  display: inline-block;
                  width: 80%;
                  overflow: hidden;
                  white-space: nowrap;
                  text-overflow: ellipsis;
                "
                >{{ item.title }}</span
              >
            </li>
            <li>
              <div class="cont4"></div>
            </li>
            <li></li>
            <li style="display: flex; flex-flow: column">
              <div class="cont5" v-if="item.price > 0">
                <span
                  style="
                    border: 1px solid #fe815a;
                    border-radius: 4px;
                    color: #fe815a;
                    padding: 2px;
                    font-size: 10px;
                  "
                >
                  出租
                </span>
                <span style="margin-left: 10px"
                  >{{ (item.price * 100) | yuan }}/天
                </span>
              </div>
              <div style="display: flex; flex-direction: row">
                <p
                  style="
                    flex: 1;
                    margin-top: 4px;
                    font-size: 12px;
                    color: rgb(166, 168, 181);
                  "
                >
                  {{ item.areaName }}
                </p>
                <p
                  style="
                    flex: 1;
                    margin-top: 4px;
                    font-size: 12px;
                    color: rgb(166, 168, 181);
                  "
                >
                  {{ item.newLevel }}成新
                </p>
                <p
                  style="
                    flex: 1;
                    margin-top: 4px;
                    font-size: 12px;
                    color: rgb(166, 168, 181);
                  "
                >
                  {{ item.updateTime.slice(0, 10) }}
                </p>
              </div>
            </li>
          </ul>
        </li>
        <li
          style="
            width: 100%;
            display: flex;
            justify-content: space-between;
            padding-bottom: 10px;
          "
        >
          <p
            @click="domain('/info/rent')"
            style="
              width: 50%;
              padding: 6px 0;
              margin: 10px auto;
              border: 1px solid #eaeaea;
              text-align: center;
              margin-bottom: 13px;
              border-radius: 20px;
            "
          >
            点击查看更多信息
          </p>
        </li>
      </ul>
    </article>

    <!-- 二手市场 -->
    <article class="article">
      <van-row class="titall" style="margin-top: 13px">
        <van-col class="titlering" style="background: #f2f1f6">
          <div
            class="titext"
            style="float: left; display: flex; align-items: center"
          >
            <img
              :src="hand_transfer"
              alt=""
              style="width: 16px; height: 16px"
            />
            <span style="display: block; float: left; margin-left: 6px">
              工具设备二手转让</span
            >
            <span
              style="
                font-weight: 500;
                color: #ffa829;
                font-size: 12px;
                margin-left: 5px;
                display: block;
                float: left;
              "
              >平台认证，售后有保障</span
            >
          </div>
          <!-- <div style="padding-right: 3%" @click="redirectTo('/info/used')">
            <span>全部</span> &nbsp;
            <van-icon name="arrow" size="16" color="black" />
          </div> -->
        </van-col>
      </van-row>

      <ul>
        <li
          v-for="(item, inex) in listHand.secondList"
          :key="inex"
          @click="domain('/info/used')"
          style="padding: 15px 0"
          :class="inex != listHand.secondList.length - 1 ? 'bottr' : null"
        >
          <!-- $router.push(`/info/rent-detail/${item.id}`) -->
          <aside
            class="left"
            :style="{
              backgroundImage: `url(${
                item.images[0] == undefined ? bei[inex] : item.images[0]
              })`,
              backgroundColor: !item.images[0] ? '#1E7BF4' : '',
              borderRadius: '4px',
              width: '87px',
              height: '87px',
            }"
          ></aside>
          <ul class="right">
            <li style="display: flex">
              <span
                :style="{
                  background:
                    item.userType == '平台'
                      ? '#86d1a4'
                      : item.userType == '门店'
                      ? '#94abe0'
                      : item.userType == '个人'
                      ? '#f4a97c'
                      : '',
                }"
                style="
                  font-size: 12px;
                  color: white;
                  display: flex;
                  align-items: center;
                  padding: 2px 3px;
                  border-radius: 2px;
                "
              >
                {{ item.userType == undefined ? '待审' : item.userType }}</span
              >
              <span
                style="
                  font-size: 14px;
                  margin-left: 5px;
                  display: inline-block;
                  width: 80%;
                  overflow: hidden;
                  white-space: nowrap;
                  text-overflow: ellipsis;
                "
                >{{ item.title }}</span
              >
            </li>
            <li>
              <div class="cont4"></div>
            </li>
            <li></li>
            <li style="display: flex; flex-flow: column">
              <div class="cont5" v-if="item.price > 0">
                <span
                  style="
                    border: 1px solid #fe815a;
                    border-radius: 4px;
                    color: #fe815a;
                    padding: 2px;
                    font-size: 10px;
                  "
                >
                  二手
                </span>
                <span style="margin-left: 10px"
                  >{{ (item.price * 100) | yuan }}
                </span>
              </div>
              <div style="display: flex; flex-direction: row">
                <p
                  style="
                    flex: 1;
                    margin-top: 4px;
                    font-size: 12px;
                    color: rgb(166, 168, 181);
                  "
                >
                  {{ item.areaName }}
                </p>
                <p
                  style="
                    flex: 1;
                    margin-top: 4px;
                    font-size: 12px;
                    color: rgb(166, 168, 181);
                  "
                >
                  {{ item.newLevel }}成新
                </p>
                <p
                  style="
                    flex: 1;
                    margin-top: 4px;
                    font-size: 12px;
                    color: rgb(166, 168, 181);
                  "
                >
                  {{ item.updateTime.slice(0, 10) }}
                </p>
              </div>
            </li>
          </ul>
        </li>
        <li style="width: 100%; display: flex; justify-content: space-between">
          <p
            @click="domain('/info/used')"
            style="
              width: 50%;
              padding: 6px 0;
              margin: 10px auto;
              border: 1px solid #eaeaea;
              text-align: center;
              margin-bottom: 13px;
              border-radius: 20px;
            "
          >
            点击查看更多信息
          </p>
        </li>
        <li>
          <p></p>
        </li>
      </ul>
    </article>
  </div>
</template>

<script>
import {
  getHome,
  dicItems,
  // voildteHasWatched,
  gethomebuton,
  authInfo,
  // morelistProject,
  getContractDicItem,
  // funconstru,
  adList,
  topicDetail,
  // storery,
  hmeinfo,
  // morelistRent,
  // morestorery,
  // morelistUsed,
  // moregetContractList,
  // morelistTeam,
} from '@/api/api';
import scrollFixed from '@/mixin/scroll-fixed';
import firstpiu from '@/assets/images/firstpiu.png';
import { getLocalStorage, removeLocalStorage } from '@/utils/local-storage';
import pensoli from '@/assets/images/project.png';
import Realname from '@/assets/images/certificate.png';
import newlogo from '@/assets/images/newlogo.png';
import wanshifu from '@/assets/images/wanshifu.png';
import medal from '@/assets/images/medal.png';
import lease from '@/assets/images/lease.png';
import factory_outlet_tag from '@/assets/images/factory_outlet.png';
import logo_default from '@/assets/images/logo.jpg';
import hot_tag from '@/assets/images/hot.png';
import bottom_tag from '@/assets/images/bottom_tag.png';
import sellwellsidePng from '@/assets/images/index_sellwellside.png';
import takejob from '@/assets/images/takejob.png';

import {
  List,
  Swipe,
  SwipeItem,
  Tabbar,
  TabbarItem,
  Image,
  Search,
  Toast,
  Card,
  Row,
  Col,
  Tag,
  Tab,
  Tabs,
  Divider,
  Panel,
  Grid,
  GridItem,
  SidebarItem,
  Dialog,
  Sidebar,
} from 'vant';
import hand_transfer from '@/assets/images/hand_transfer.png';
import BaiduMap from 'vue-baidu-map/components/map/Map.vue';
import wdfw from '@/assets/images/wdfw.png';
import geren from '@/assets/images/homefrist/geren.jpg';
import gongcehng from '@/assets/images/homefrist/gongcehng.jpg';
import mendian from '@/assets/images/homefrist/mendian.jpg';
import shigong from '@/assets/images/homefrist/shigong.jpg';
import shopdd from '@/assets/images/homefrist/shopdd.jpg';
import vipzun from '@/assets/images/homefrist/vipzun.jpg';
import zushou from '@/assets/images/homefrist/zushou.jpg';

export default {
  mixins: [scrollFixed],
  name: 'corresponding',

  data() {
    return {
      hand_transfer: hand_transfer,
      workTpe: [],
      membersGoods: {
        pages: null,
        data: [],
        page: 0,
      },
      listent: [],
      roject: {
        pages: null,
        data: [],
        page: 0,
      },
      listHand: {
        listPages: null,
        secondList: [],
        listPage: 0,
      },
      warmSpringGif: '',
      firstpiu: firstpiu,
      wdfw: wdfw,
      workerlist: [],
      wanshifu: wanshifu,
      newlogo: newlogo,
      pensoli: pensoli,
      takejob: takejob,
      lease: lease,
      medal: medal,
      project: {
        pages: null,
        data: [],
        page: 0,
      },
      userId: getLocalStorage('userId').userId,
      bei: [
        'https://xintu361.oss-cn-qingdao.aliyuncs.com/a8b9myfv9aaff9vdi8ey.jpg',
        'https://xintu361.oss-cn-qingdao.aliyuncs.com/mqes4omo1web8pbr9kfg.jpg',
        'https://xintu361.oss-cn-qingdao.aliyuncs.com/gsxkzucq38dye53ktj02.jpg',
        'https://xintu361.oss-cn-qingdao.aliyuncs.com/nw6bfr5f2j0eg1frveko.jpg',
        'https://xintu361.oss-cn-qingdao.aliyuncs.com/1fsyv5k37nl0sh5t3c07.jpg',
        'https://xintu361.oss-cn-qingdao.aliyuncs.com/2ebsg1lfh8hoc0pht53w.jpg',
      ],
      Realname: Realname,

      hot_tag: hot_tag,
      bottom_tag: bottom_tag,

      logo_default: logo_default,
      sellwellside: sellwellsidePng,
      shopInfos: [],
      bannerList: [],

      factory_outlet_tag: factory_outlet_tag,
      membersPng: vipzun,

      projectPng: gongcehng,

      shopPng: mendian,
      usedPng: zushou,
      shopmal: shopdd,
      usercenterPng: geren,
      workteamPng: shigong,

      usedLinkOne: '',
      usedPriceOne: '',
      usedSrcPriceOne: '',
      usedImgOne: '',
      usedLinkTwo: '',
      usedPriceTwo: '',
      usedSrcPriceTwo: '',
      usedPriceThree: '',
      usedSrcPriceThree: '',
      usedImgThree: '',
      rentLinkOne: '',
      rentImgOne: '',
      skillnode: '',
      rentLinkTwo: '',
      painting: '',
      rentImgTwo: '',
      workTeamLinkOne: '',
      workTeamImgOne: '',
      workTeamLinkTwo: '',
      workTeamImgTwo: '',
      projectLinkOne: '',
      projectImgOne: '',
      projectLinkTwo: '',
      projectImgTwo: '',
      newGoodsLinkOne: '',
      newGoodsImgOne: '',
      newGoodsLinkTwo: '',
      newGoodsImgTwo: '',
      hotGoodsLinkOne: '',
      hotGoodsImgOne: '',
      interaction: '',
      hotGoodsLinkTwo: '',
      hotGoodsImgTwo: '',
      //是否存在开播房间
      isHavePlaying: false,
      tabtitle: '',
      //定时器
      Interval: undefined,
      projectlister: [],
      ageMap: new Map(),
      workMap: new Map(),
      setou: new Map(),
      indexmall: '',
      mobile: '',
      userInfo: '',
      itemValue: '',
      warmSpringLink: '',
    };
  },

  created() {
    //获取商品所有渲染数据
    removeLocalStorage('getskill', 'taskDivideId', 'valuetwo');
    document.title = this.$route.query.porname;
    this.tabtitle = this.$route.query.porname;
    this.itemValue = this.$route.query.itemValue;
    this.indexmall = this.$route.query.index;
    this.initViews();
    this.getmetn();
    this.getListUsed();
    this.gethomebtn();
    this.getProjectList();
    this.int();
    authInfo({}).then((res) => {
      this.userInfo = res.data.data.memberLevel;
      this.mobile = res.data.data.mobile;
    });
    dicItems({
      groupId: 'INFO.WORK.TYPE',
    }).then((res) => {
      let list = res.data.data.list;

      for (let i in list) {
        let opiton = {
          text: list[i].itemName,
          value: parseInt(list[i].itemValue),
        };
        this.workTpe.push(opiton);
      }
    });
  },
  /**
   * 监听路由是否从会员开通状态页面过来的
   */
  watch: {
    $route(to, from) {
      let regexp = new RegExp('/order/payment-vip/');
      if (regexp.test(from.path)) {
        window.location.reload();
      }
    },
  },
  methods: {
    getHasWkType(wktype_value) {
      for (let i in this.workTpe) {
        if ( Number(wktype_value)  === this.workTpe[i].value) {
          return this.workTpe[i].text;
        }
      }
    },
    // 判定是否是金牌会员
    btnrou(link) {
      if (link.indexOf('weixin') != -1) {
        window.location.href = link;
        return;
      }
      if (link == '/store/apply') {
        if (this.mobile == '' || this.mobile == undefined) {
          Dialog.confirm({
            title: '系统提示',
            message: '请先登录',
            confirmButtonText: '确定',
            cancelButtonText: '取消',
          })
            .then(() => {
              this.$router.push({ path: '/check' });
            })
            .catch(() => {});
          return;
        }
      }

      if (link == '/user/feedback') {
        if (this.mobile == '' || this.mobile == undefined) {
          Dialog.confirm({
            title: '系统提示',
            message: '请先登录',
            confirmButtonText: '确定',
            cancelButtonText: '取消',
          })
            .then(() => {
              this.$router.push({ path: '/check' });
            })
            .catch(() => {});
          return;
        }
      }
      if (link == '/items/members-zone/1') {
        if (this.userInfo != 1) {
          Dialog.confirm({
            title: '系统提示',
            message: '请先开通金牌会员',
            confirmButtonText: '确定',
            cancelButtonText: '取消',
          })
            .then(() => {
              if (this.mobile == '' || this.mobile == undefined) {
                Dialog.confirm({
                  title: '系统提示',
                  message: '请先登录',
                  confirmButtonText: '确定',
                  cancelButtonText: '取消',
                })
                  .then(() => {
                    this.$router.push({ path: '/check' });
                  })
                  .catch(() => {});
                return;
              }
              this.pay(2);
            })
            .catch(() => {});
        } else {
          this.$router.push({ path: link });
        }
      } else {
        this.$router.push({ path: link });
      }
    },
    itemClick(link) {
      this.$router.push({ path: link });
    },
    getSrc(item, id) {
      let ranshu = Math.floor(Math.random() * 4);
      // 取余是指剩下小于除数的数被取下来，不是除完后取小数点后面的数
      let image = this.bei[id % 6];
      if (item.imgUrl != null && item.imgUrl != '') {
        image = item.imgUrl;
      }
      return image;
    },
    async getmetn() {
      // let area = this.$store.getters.getArea;
      // await morestorery({
      //   limit: 5,
      // }).then((res) => {
      //   this.roject.data.push(...res.data.data.list);
      // });
    },

    // 获取二手数据
    async getListUsed() {
      let area = this.$store.getters.getArea;

      await dicItems({
        groupId: 'RENT_USER_TYPE',
      }).then((res) => {
        res.data.data.list.forEach((e) => {
          this.setou.set(e.itemValue, e.itemName);
        });
        // morelistUsed({
        //   areaCode: area.code == undefined ? '100000' : area.code,
        //   viewMore: 0,
        // }).then((res) => {
        //   res.data.data.list.forEach((item) => {
        //     if (this.setou.get(String(item.userType))) {
        //       item.userType = this.setou.get(String(item.userType));
        //     }
        //   });
        //   this.listHand.secondList.push(...res.data.data.list.slice(0, 5));
        // });
      });
      hmeinfo({
        areaCode: area.code == undefined ? '100000' : area.code,
        workType: this.itemValue,
      }).then((res) => {
        // 工程发包
        setTimeout(() => {
          this.project.data.push(...res.data.data.projectMore);
        }, 100);

        // 万师傅
        setTimeout(() => {
          let work = res.data.data.contractMore.slice(0, 5);
          work.forEach((ite) => {
            let worktru = ite.workType;
            let worktruarr = [];
            if (this.ageMap.get(String(ite.workHour))) {
              ite.workHour = this.ageMap.get(String(ite.workHour));
            }
            worktru.forEach((item) => {
              if (this.workMap.get(String(item))) {
                worktruarr.push(this.workMap.get(String(item)));
              }
            });
            ite.workType = worktruarr;
          });
          this.workerlist.push(...work);
        }, 150);

        //施工找活
        setTimeout(() => {
          let proj = res.data.data.teamsMore.slice(0, 5);

          proj.forEach((ite) => {
            let work = ite.workType;
            let workarr = [];
            console.log(typeof ite.workType);
            ite.workType.forEach((item) => {
              if (this.workMap.get(String(item))) {
                workarr.push(this.workMap.get(String(item)));
              }
            });
            ite.workType = workarr;
          });
          this.projectlister.push(...proj);
        }, 200);

        // 门店
        setTimeout(() => {
          this.roject.data.push(...res.data.data.merchantMore);
        }, 250);

        // 出租
        setTimeout(() => {
          res.data.data.rentMore.forEach((e) => {
            if (this.setou.get(String(e.userType))) {
              e.userType = this.setou.get(String(e.userType));
            }
          });
          this.listent.push(...res.data.data.rentMore.slice(0, 5));
        }, 300);

        // 二手
        setTimeout(() => {
          res.data.data.usedMore.forEach((item) => {
            if (this.setou.get(String(item.userType))) {
              item.userType = this.setou.get(String(item.userType));
            }
          });
          this.listHand.secondList.push(...res.data.data.usedMore.slice(0, 5));
        }, 350);

        // console.log(res.data.data, 'ce');
      });

      // await morelistRent({
      //   inClass: -1,
      //   newLevel: -1,
      //   page: 1,
      //   limit: 5,
      //   areaCode: area.code == undefined ? '100000' : area.code,
      //   viewMore: 0,
      // }).then((res) => {
      //   res.data.data.list.forEach((e) => {
      //     if (this.setou.get(String(e.userType))) {
      //       e.userType = this.setou.get(String(e.userType));
      //     }
      //   });
      //   this.listent.push(...res.data.data.list.slice(0, 5));
      // });
    },
    // authRedirectTo(link, id) {
    //   voildteHasWatched({ shopId: id })
    //     .then((res) => {
    //       if (res.data && res.data.data && res.data.status) {
    //         this.hasBeWatched = true;
    //         this.message = res.data.errmsg;
    //       } else {
    //         this.message = res.data.errmsg;
    //       }
    //       this.$router.push({
    //         path: link,
    //       });
    //     })
    //     .catch((err) => {
    //       this.$router.push({
    //         path: link,
    //       });
    //       if (err.data && err.data.data && err.data.status) {
    //         this.hasBeWatched = true;
    //         this.message = err.data.errmsg;
    //       } else {
    //         this.message = err.data.errmsg;
    //       }

    //     });

    //   if (link == null || link == '' || link == undefined) {
    //     return;
    //   }
    //   if (link.indexOf('http') != -1) {
    //     window.location.href = link;
    //     return;
    //   }
    // },
    // 工程专区数据
    async getProjectList() {
      let area = this.$store.getters.getArea;

      // await morelistProject({
      //   choiceness: 1,
      //   viewMore: 0,
      //   skill: this.itemValue,
      //   areaCode: area.code == undefined ? '100000' : area.code,
      // })
      //   .then((res) => {
      //     this.project.data.push(...res.data.data.list);
      //     this.project.pages = res.data.data.pages;
      //   })
      //   .catch((err) => {});
      await adList({
        position: 12,
      })
        .then((res) => {
          //暖春节图片
          this.warmSpringGif = res.data.data.list[0].url || logo_default;
          this.warmSpringLink = res.data.data.list[0].link;
        })
        .catch((e) => {
          console.log('===========暖春节 信息获取失败!============');
        });
      await topicDetail({ id: 2 }).then((res) => {
        this.membersGoods.data.push(...res.data.data.goods);
      });
    },
    int() {
      getContractDicItem()
        .then((res) => {
          const workage = res.data.data.ageList;
          const task = res.data.data.gozong;
          workage.forEach((item) => {
            this.ageMap.set(item.itemValue, item.itemName);
          });
          task.forEach((res) => {
            this.workMap.set(res.itemValue, res.itemName);
          });
        })
        .then(() => {
          // if (this.itemValue == undefined) {
          //   this.itemValue = -1;
          // }
          // let area = this.$store.getters.getArea;
          // moregetContractList({
          //   workType: this.itemValue,
          //   regionId: area.code == undefined ? '100000' : area.code,
          //   viewMore: 0,
          // }).then((res) => {
          //   let work = res.data.data.list.slice(0, 5);
          //   work.forEach((ite) => {
          //     let worktru = ite.workType;
          //     let worktruarr = [];
          //     if (this.ageMap.get(String(ite.workHour))) {
          //       ite.workHour = this.ageMap.get(String(ite.workHour));
          //     }
          //     worktru.forEach((item) => {
          //       if (this.workMap.get(String(item))) {
          //         worktruarr.push(this.workMap.get(String(item)));
          //       }
          //     });
          //     ite.workType = worktruarr;
          //   });
          //   this.workerlist.push(...work);
          // });
          // morelistTeam({
          //   viewMore: 0,
          //   areaCode: area.code == undefined ? '100000' : area.code,
          //   skill: this.itemValue,
          //   limit: 5,
          //   page: 1,
          // }).then((res) => {
          //   let proj = res.data.data.list.slice(0, 5);
          //   this.projectlister.push(...proj);
          //   proj.forEach((ite) => {
          //     let work = ite.workType;
          //     let workarr = [];
          //     work.forEach((item) => {
          //       if (this.workMap.get(String(item))) {
          //         workarr.push(this.workMap.get(String(item)));
          //       }
          //     });
          //     ite.workType = workarr;
          //   });
          // });
        });
    },
    async gethomebtn() {
      await gethomebuton({
        userId: Number(this.userId),
        mode: 18,
      })
        .then((res) => {
          this.interaction = res.data.data;
        })
        .catch((err) => {});
      await gethomebuton({
        userId: Number(this.userId),
        mode: 17,
      })
        .then((res) => {
          this.painting = res.data.data;
        })
        .catch((err) => {});
    },
    domain(link) {
      this.$router.push({
        path:
          link +
          '?skill=' +
          this.itemValue +
          '&name=' +
          this.tabtitle +
          '&index=' +
          this.indexmall,
      });
    },
    // 工程专区详情信息跳转页面
    itemProjectClick(id) {
      this.$router.push(`/info/project-detail/${id}`);
    },
    redirectTo(link) {
      if (link == null || link == '' || link == undefined) {
        return;
      }
      if (link.indexOf('http') != -1) {
        window.location.href = link;
        return;
      }
      if (link.indexOf('weixin') != -1) {
        window.location.href = link;
        return;
      }
      this.$router.push({
        path: link,
      });
    },

    // 首页轮播
    initViews() {
      getHome({}).then((res) => {
        this.shopInfos = res.data.data;
        //二手买卖
        this.usedLinkOne =
          this.shopInfos.usedList[0] && this.shopInfos.usedList[0].link
            ? this.shopInfos.usedList[0].link
            : '';
        this.usedSrcPriceOne =
          this.shopInfos.usedList[0] && this.shopInfos.usedList[0].name
            ? this.shopInfos.usedList[0].name
            : '未知';
        this.usedPriceOne =
          this.shopInfos.usedList[0] && this.shopInfos.usedList[0].content
            ? this.shopInfos.usedList[0].content
            : '面议';
        this.usedImgOne =
          this.shopInfos.usedList[0] && this.shopInfos.usedList[0].url
            ? this.shopInfos.usedList[0].url
            : logo_default;
        this.usedLinkTwo =
          this.shopInfos.usedList[1] && this.shopInfos.usedList[1].link
            ? this.shopInfos.usedList[1].link
            : '';
        this.usedSrcPriceTwo =
          this.shopInfos.usedList[1] && this.shopInfos.usedList[1].name
            ? this.shopInfos.usedList[1].name
            : '未知';
        this.usedPriceTwo =
          this.shopInfos.usedList[1] && this.shopInfos.usedList[1].content
            ? this.shopInfos.usedList[1].content
            : '面议';
        this.usedImgTwo =
          this.shopInfos.usedList[1] && this.shopInfos.usedList[1].url
            ? this.shopInfos.usedList[1].url
            : logo_default;
        this.usedLinkThree =
          this.shopInfos.usedList[2] && this.shopInfos.usedList[2].link
            ? this.shopInfos.usedList[2].link
            : '';
        this.usedSrcPriceThree =
          this.shopInfos.usedList[2] && this.shopInfos.usedList[2].name
            ? this.shopInfos.usedList[2].name
            : '未知';
        this.usedPriceThree =
          this.shopInfos.usedList[2] && this.shopInfos.usedList[2].content
            ? this.shopInfos.usedList[2].content
            : '面议';
        this.usedImgThree =
          this.shopInfos.usedList[2] && this.shopInfos.usedList[2].url
            ? this.shopInfos.usedList[2].url
            : logo_default;
        //热租好物
        this.rentLinkOne =
          this.shopInfos.rentList[0] && this.shopInfos.rentList[0].link
            ? this.shopInfos.rentList[0].link
            : '';
        this.rentImgOne =
          this.shopInfos.rentList[0] && this.shopInfos.rentList[0].url
            ? this.shopInfos.rentList[0].url
            : logo_default;
        this.rentLinkTwo =
          this.shopInfos.rentList[1] && this.shopInfos.rentList[1].link
            ? this.shopInfos.rentList[1].link
            : '';
        this.rentImgTwo =
          this.shopInfos.rentList[1] && this.shopInfos.rentList[1].url
            ? this.shopInfos.rentList[1].url
            : logo_default;
        //工程发包
        this.projectLinkOne =
          this.shopInfos.projectList[0] && this.shopInfos.projectList[0].link
            ? this.shopInfos.projectList[0].link
            : '';
        this.projectImgOne =
          this.shopInfos.projectList[0] && this.shopInfos.projectList[0].url
            ? this.shopInfos.projectList[0].url
            : logo_default;
        this.projectLinkTwo =
          this.shopInfos.projectList[1] && this.shopInfos.projectList[1].link
            ? this.shopInfos.projectList[1].link
            : '';
        this.projectImgTwo =
          this.shopInfos.projectList[1] && this.shopInfos.projectList[1].url
            ? this.shopInfos.projectList[1].url
            : logo_default;
        //新品首发
        this.newGoodsLinkOne =
          this.shopInfos.newList[0] && this.shopInfos.newList[0].link
            ? this.shopInfos.newList[0].link
            : '';
        this.newGoodsImgOne =
          this.shopInfos.newList[0] && this.shopInfos.newList[0].url
            ? this.shopInfos.newList[0].url
            : logo_default;
        this.newGoodsLinkTwo =
          this.shopInfos.newList[1] && this.shopInfos.newList[1].link
            ? this.shopInfos.newList[1].link
            : '';
        this.newGoodsImgTwo =
          this.shopInfos.newList[1] && this.shopInfos.newList[1].url
            ? this.shopInfos.newList[1].url
            : logo_default;
        //施工队伍
        this.workTeamLinkOne =
          this.shopInfos.workTeamList[0] && this.shopInfos.workTeamList[0].link
            ? this.shopInfos.workTeamList[0].link
            : '';
        this.workTeamImgOne =
          this.shopInfos.workTeamList[0] && this.shopInfos.workTeamList[0].url
            ? this.shopInfos.workTeamList[0].url
            : logo_default;
        this.workTeamLinkTwo =
          this.shopInfos.workTeamList[1] && this.shopInfos.workTeamList[1].link
            ? this.shopInfos.workTeamList[1].link
            : '';
        this.workTeamImgTwo =
          this.shopInfos.workTeamList[1] && this.shopInfos.workTeamList[1].url
            ? this.shopInfos.workTeamList[1].url
            : logo_default;
        //好物种草
        this.hotGoodsLinkOne =
          this.shopInfos.hotList[0] && this.shopInfos.hotList[0].link
            ? this.shopInfos.hotList[0].link
            : '';
        this.hotGoodsImgOne =
          this.shopInfos.hotList[0] && this.shopInfos.hotList[0].url
            ? this.shopInfos.hotList[0].url
            : logo_default;
        this.hotGoodsLinkTwo =
          this.shopInfos.hotList[1] && this.shopInfos.hotList[1].link
            ? this.shopInfos.hotList[1].link
            : '';
        this.hotGoodsImgTwo =
          this.shopInfos.hotList[1] && this.shopInfos.hotList[1].url
            ? this.shopInfos.hotList[1].url
            : logo_default;
      });

      //每分钟刷新一次
      if (this.Interval) {
        window.clearInterval(this.Interval);
      }
      this.Interval = setInterval(() => {
        //this.HandleIsHavePlaying()
      }, 1000 * 60);
    },
  },
  computed: {
    sideBarListWrap() {
      this.sideBarList.map((el) => {
        if (el.length >= 5) {
          // :class="item.length>=5? '': wrpaList"
          var str2 = el.substring(3, this.name.length);
          var str1 = this.name.substring(0, 3);
          el = str1 + '<br>' + str2;
        }
      });
    },
  },
  components: {
    BaiduMap,
    [Row.name]: Row,
    [Image.name]: Image,
    [Col.name]: Col,
    [Card.name]: Card,
    [Toast.name]: Toast,
    [Search.name]: Search,
    [List.name]: List,
    [Swipe.name]: Swipe,
    [SwipeItem.name]: SwipeItem,
    [Tabbar.name]: Tabbar,
    [TabbarItem.name]: TabbarItem,
    [Tag.name]: Tag,
    [Image.name]: Image,
    [Tab.name]: Tab,
    [Tabs.name]: Tabs,
    [Divider.name]: Divider,
    [Panel.name]: Panel,
    [Grid.name]: Grid,
    [GridItem.name]: GridItem,
    [Sidebar.name]: Sidebar,
    [SidebarItem.name]: SidebarItem,
    [Dialog.Component.name]: Dialog.Component,
  },
};
</script>

<style lang="scss" scoped>
body {
  overflow: hidden;
}
/deep/ .title {
  font-weight: bold;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.van-cell {
  padding: 0 !important;
}
.cell-div {
  width: 100%;
}
.item {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-box-pack: center;
  -webkit-line-clamp: 1;
  white-space: normal;
  overflow: hidden;
  color: #969799;
  font-size: 12px;
  font-weight: normal;
  margin-top: 0;
}
.cell-div span {
  color: #bbbbbb;
  font-size: 12px;
}
.function {
  background-color: #fff;
  // margin: 0 4%;
  border-radius: 6px;

  div {
    text-align: center;

    span {
      font-size: 14px;
    }
  }
}

// 小标签

.marle {
  margin-left: 3px;
  border-radius: 2px !important;
  padding: 4px 6px !important;
  font-size: 12px !important;
  color: white !important;
  // background: white !important;
  letter-spacing: 1px;
}

.tag {
  border-radius: 2px !important;
  padding: 4px 6px !important;
  font-size: 12px !important;
  color: white !important;
  // background: white !important;
  letter-spacing: 1px;
}
.marlet {
  margin-left: 3px;
  border-radius: 2px !important;
  padding: 4px 6px !important;
  font-size: 12px !important;
  color: #1d5ae8 !important;
  // background: white !important;
  letter-spacing: 1px;
}

.tagt {
  border-radius: 2px !important;
  padding: 4px 6px !important;
  font-size: 12px !important;
  color: #1d5ae8 !important;
  // background: white !important;
  letter-spacing: 1px;
}

.vansidebar {
  width: 100%;
  text-align: center;
  padding: 1.5rem 0;
}

.minden {
  position: relative;
}

.vansidebarhei {
  color: #1d5ae8;
  border-right: 2px solid #1d5ae8;
  font-weight: 650;
  text-align: center;
  padding: 1.5rem 0;
}

.vansidebarhei {
  background: white;
  transition: 0.5s;
}

.vansidebarlist {
  float: left;
  width: 20%;
  height: 100%;
  background: rgb(231, 230, 230);
  overflow: scroll;
}

.vansidebarlist::-webkit-scrollbar {
  opacity: 0;
  display: none;
}

.side_scroll {
  height: auto !important;
  overflow: scroll;
}

// .van-sidebar {
//   width: 20% !important;
// }
.van-sidebar {
  height: 55.5vh !important;
}

.van-list {
  height: auto !important;
}

.iconSty {
  margin: 0 !important;
  padding-left: 5px;
  background: #ffffff;
}

.engineering_content_pos {
  width: 100px;
  height: 100px;
  // border-radius: 4px;
  //padding-bottom: 100%;
  background-size: 100% 100%;
  position: relative;
  //margin-top: 0.5rem;
  font-size: 14px;

  span {
    display: inline-block;
    position: absolute;
    bottom: 0;
    left: 0;
    text-align: center;
    width: 100%;
    height: 1.1rem;
    height: 1.1rem;
    font-size: 0.8rem;
    // opacity: 0.5;
    color: #fff;
    background-color: rgba(121, 171, 247, 0.79);
  }
}

.tab_home {
  background-color: #f2f1f6;
}

.little_small {
  overflow: hidden;
  border-radius: 0.5rem;
  margin: 0 0.75rem;
  font-size: 14px;
  //box-shadow: 0px 0px 0.5rem #c3c3c3;
}

// 导航分类区
.navigate_z {
  // height: 360px;
  background-color: #fff;
  border-radius: 0.5rem;

  .navigate_content_big {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    padding: 1.7rem 0 1rem 0;

    .navigate_content {
      width: 33.333333%;
      height: 6.75rem;
      padding: 0 0.5rem;
      margin-bottom: 0.7rem;
    }
  }
}

.titall {
  width: 100%;

  .titlering {
    display: flex;
    background: #f2f1f6;
    width: 100%;
    height: 3rem;
    // border-bottom: 1px solid #69686831;
    justify-content: space-between;
    align-items: center;

    div:nth-child(1) {
      margin-left: 0.85rem;
      font-weight: 600;
      font-size: 16px;
    }

    // div:nth-child(1)::before {

    // }
  }
}

// 具体工程区

// 滚动条隐藏属性
.sroldiv::-webkit-scrollbar {
  opacity: 0.1;
}

/deep/.engineering_z {
  display: flex;
  width: auto;
  padding: 0 3px;
  // calc是长宽度自动计算属性，支持计算符号，但记得需要加空格
  // width: calc(300% - 2.75rem);

  .engineering {
    div:nth-child(1) {
      font-size: 0.9rem;
      margin-left: 0.5rem;
      font-weight: 700;
    }

    div:nth-child(2) {
      align-items: center;
      margin-right: 0.5rem;

      span:nth-child(1) {
        height: 1rem;
        line-height: 1rem;
        margin-right: 0.1rem;
        font-size: 0.7rem;
        color: #a6a4a4;
      }
    }
  }

  .engineering_content {
    width: 33%;
    // display: flex;
    height: 163px;
    float: left;
    // box-shadow: 0 0 1px 1px rgba(90, 90, 90, 0.192),
    //   -2px 2px 2px rgba(90, 90, 90, 0.192);
    padding: 5px;
    background-color: #fff;
    // margin-left: 0.6rem;
    border-radius: 4px;

    .engineering_wenzi {
      // display: flex;
      // flex-direction: column;
      // justify-content: space-between;
      height: 155px;
      width: 100px;
      display: flex;
      flex-direction: column;

      // padding-left: 10px;
      div:nth-child(2) {
        height: auto;
        max-height: 55px;
        overflow: hidden;
        margin-top: 10px;
        text-align: left;
        width: 100%;
        flex: 1;
        display: flex;
        flex-direction: column;

        .title_zushou {
          width: 100%;
          font-size: 0.8rem;
          //margin-top: 0.9rem;
          //font-weight: 700;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 1;
          overflow: hidden;
        }

        .detail_zushou {
          width: 100%;
          margin: 0.4rem 0;
          font-size: 0.7rem;
          color: rgba(166, 164, 164, 1);
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 1;
          overflow: hidden;
        }

        .title1,
        .title2 {
          text-overflow: ellipsis;
          overflow: hidden;
          white-space: nowrap;
        }

        .title2 {
          font-size: 12px;
          color: #7e7b7b;
        }
      }
    }
  }
}

.gengduo_se {
  justify-content: center;
  text-align: center;
  // display: flex;
  // align-items: center;
  font-size: 0.75rem;

  margin: 0.5rem auto;
  width: 60%;
  padding: 2% 1%;
  border-radius: 5px;
  color: white;
  font-weight: 600;
  height: auto;
  background: #f94804;
}

.gengduo {
  text-align: center;
  // display: flex;
  // align-items: center;
  font-size: 0.75rem;
  margin: 0.5rem auto;
  width: 60%;
  padding: 2% 1%;
  border-radius: 5px;
  color: white;
  font-weight: 600;
  height: auto;
  background: #f94804;
}

.gengduo::after {
  // content: '';
  display: inline-block;
  width: 0.35rem;
  height: 0.35rem;
  color: white;
  border-top: 2px solid white;
  border-right: 2px solid white;
  transform: rotate(45deg);
}

.box_bottom {
  width: 100%;
  padding: 0 0.8rem;
  margin-bottom: 1rem;

  // 租售专区
  .rental_z {
    width: 100%;
    background-color: #fff;

    .rental_title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      // width: calc(100% - 10px);
      width: 100%;
      height: 2.25rem;
      // border-bottom: 1px solid #eee;

      div:nth-child(1) {
        // width: 75px;
        font-size: 0.88rem;
        // margin-left: 0.5rem;
        font-weight: 700;
      }

      div:nth-child(2) {
        display: flex;
        align-items: center;
        // margin-right: 0.5rem;

        span:nth-child(1) {
          height: 1rem;
          line-height: 1rem;
          margin-right: 0.1rem;
          font-size: 0.7rem;
          color: rgba(166, 164, 164, 1);
        }
      }
    }

    .rental_cen {
      // display: flex;
      flex-direction: row;
      // align-items: center;
      // padding: 0 0.5rem;
      width: 100%;

      .rental_content {
        display: flex;
        flex-direction: column;
        width: 46%;
        margin: 1rem 0;
        padding: 0.5rem;
        // margin-left: 1rem;
        border-radius: 10px;
        box-shadow: 0px 0px 8px rgba(20, 20, 20, 0.236);
        // height: 70px;
        // .van-col:nth-child(1) {
        //   // display: flex;
        //   // flex-direction: column;
        //   // .van-image {
        //   //   overflow: hidden;
        //   //   border-radius: 50%;
        //   // height: auto;
        // }

        .rental_right {
          display: flex;
          align-items: center;
          width: 100%;

          p {
            display: -webkit-box;
            margin: 1rem 0;
            overflow: hidden;
            text-align: center;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
          }

          // .van-col:nth-child(1) {
          //   // div:nth-child(1) {
          //   //   height: 1.5rem;
          //   //   margin-left: 0.6rem;
          //   //   line-height: 1.5rem;
          //   //   font-size: 0.8rem;
          //   //   text-align: left;
          //   //   overflow: hidden;
          //   //   text-overflow: ellipsis;
          //   //   white-space: nowrap;
          //   // }

          //   // div:nth-child(2) {
          //   //   margin-left: 0.6rem;
          //   //   height: 1.2rem;
          //   //   line-height: 1.2rem;
          //   //   font-size: 0.7rem;
          //   //   color: #a6a4a4;
          //   //   overflow: hidden;
          //   //   text-overflow: ellipsis;
          //   //   white-space: nowrap;
          //   //   text-align: left;
          //   // }
          // }

          // .van-col:nth-child(2) {
          //   display: flex;
          //   justify-content: center;
          //   align-items: center;

          //   div {
          //     width: 4.4rem;
          //     height: 1.5rem;
          //     line-height: 1.5rem;
          //     //text-align: center;
          //     border: 1px solid #bbbbbb;
          //     border-radius: 0.75rem;
          //     font-size: 0.65rem;
          //   }
          // }
        }
      }
    }
  }

  .rental_bot {
    width: 100%;
    height: 1.1rem;
    background-color: #fff;
    border-top: 1px solid #eee;
    border-radius: 0 0 0.5rem 0.5rem;
  }

  .video_class {
    margin-top: 1rem;

    .video_tit {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 1.75rem;

      span:nth-child(1) {
        display: flex;
        align-items: center;
        font-weight: 700;
        font-size: 1rem;
      }

      span:nth-child(1)::before {
        content: '';
        display: inline-block;
        margin-right: 0.4rem;
        width: 0.4rem;
        height: 1.3rem;
        background-color: #f77d52;
      }

      span:nth-child(2) {
        font-size: 0.7rem;
        color: #a6a4a4;
        padding-right: 0.1rem;
      }

      span:nth-child(2)::after {
        content: '';
        display: inline-block;
        width: 0.35rem;
        height: 0.35rem;
        border-top: 0.1rem solid #a6a4a4;
        border-right: 0.1rem solid #a6a4a4;
        transform: rotate(45deg);
        -webkit-transform: rotate(45deg);
      }
    }

    .video_cont {
      margin-top: 1rem;

      .van-col {
        border-radius: 0.5rem;
        overflow: hidden;
        height: 13.1rem;

        div:nth-child(1) {
          width: 100%;
          height: 11.3rem;
          background-color: #fff;
        }

        div:nth-child(2) {
          overflow: hidden; //超出部分隐藏
          text-overflow: ellipsis; //超出部分显示...
          white-space: nowrap; //文本强制一行显示
          width: 100%;
          height: calc(100% - 11.3rem);
          // line-height: calc(100% - 226px);
          font-size: 0.8rem;
          padding: 0.3rem;
        }
      }
    }
  }
}

/deep/.van-field__control[type='search'] {
  height: 1rem;
  // line-height: 2.1rem;
  font-size: 14px;
}

.van-cell__value--alone {
  height: 1.1rem;
}

.clear {
  clear: both;
}

//banner下小标题导航
.little-navigate {
  text-align: center;
  padding: 0 0 1rem 0;
  //background-color: #fff;

  img {
    width: 3rem;
    height: 3rem;
  }

  span {
    display: inline-block;
    width: 100%;
    //float: left;
    padding-top: 0.15rem;
  }
}

// 畅销榜
.sellwell {
  width: 100%;
  margin: 0.6rem 0;

  .left {
    position: relative;
    float: left;
    width: 30%;
    padding-bottom: 25.2%;
    background: #ee3f00;
    border-radius: 0.5rem;
    margin-left: 4%;

    .img {
      position: absolute;
      top: 3%;
      height: 94%;
      left: 2%;
      width: 96%;
      border-radius: 0.5rem;
      background-size: 100% 100%;
    }
  }

  .piece {
    float: left;
    width: 2%;
    padding-bottom: calc(25.2% - 0.95rem);
    background: #ee3f00;
    margin-top: 0.475rem;
  }

  .middle {
    float: left;
    width: 28%;
    padding-bottom: 25.2%;
    //background:#FF7441;
    border-radius: 0.5rem;
    position: relative;

    .top {
      font-size: 0.9rem;
      color: #fff;
      position: absolute;
      top: 1.2rem;
      font-weight: bold;
      left: calc(50% - 1.5em);
    }

    .bottom {
      font-size: 0.7rem;
      color: #101010;
      background: #fff;
      position: absolute;
      bottom: 1.2rem;
      left: calc(50% - 2em - 0.5rem);
      border-radius: 1rem;
      padding: 0 0.5rem;
    }
  }

  .right {
    // position: relative;
    // float: left;
    // width: 30%;
    padding-bottom: 25.2%;
    background: #ee3f00;
    border-radius: 0.5rem;

    .img {
      position: absolute;
      top: 3%;
      height: 94%;
      left: 2%;
      width: 96%;
      border-radius: 0.5rem;
      background-size: 100% 100%;
    }
  }
}

//信息中心
.info-center {
  border-radius: 0.5rem;
  background-color: #fff;
  margin: 0 0.75rem;
  padding: 0.5rem 0 1rem 0;

  .top {
    .used {
      .title {
        .main {
          font-size: 0.8rem;
          color: #101010;
          font-weight: bold;
          height: 1.1rem;
          line-height: 1.1rem;
        }

        .more {
          font-size: 0.6rem;
          border: 1px solid #ff2b21;
          border-radius: 0.7rem;
          height: 1rem;
          line-height: 1rem;
          display: inline-block;
          padding: 0 0.15rem 0 0;

          .left {
            padding: 0 0.25rem;
            height: calc(1rem - 0.1rem);
            line-height: calc(1rem - 0.1rem);
            display: inline-block;
            background-color: #ff2b21;
            color: #fff;
            border-radius: 0.7rem;
            text-align: center;
            padding: 1px 0.3rem;
          }

          .right {
            text-align: center;
            color: #ff2b21;
            font-weight: 400;
          }
        }
      }

      .content {
        text-align: center;
        margin-top: calc(0.6rem + 0.15rem);

        .img {
          background-size: 100% 100%;
          width: 96%;
          padding-bottom: 96%;
          margin: 0 auto;
        }

        span {
          display: inline-block;
          width: 100%;
          //float: left;
          font-size: 0.6rem;
        }

        .price {
          margin-top: 0.1rem;
          font-weight: bold;
          color: #000;
        }

        .srcPrice {
          margin-top: 1px;
          font-size: 0.5rem;
          color: #9f9f9d;
          text-decoration: line-through;
        }
      }
    }

    .rent {
      .title {
        .main {
          font-size: 0.8rem;
          color: #101010;
          height: 1.1rem;
          line-height: 1.1rem;
        }

        .more {
          height: 1rem;
          line-height: 1rem;
          display: inline-block;
          padding: 0 0.15rem 0 0.35rem;
          font-size: 0.6rem;
          border: 1px solid #92f396;
          border-radius: 0.7rem;
          text-align: center;

          .word {
            background-image: -webkit-linear-gradient(left, #92f396, #44cbec);
            background-clip: text;
            -webkit-text-fill-color: transparent;
          }

          .arrow {
            color: #44cbec;
          }
        }
      }

      .titletwo {
        background-image: -webkit-linear-gradient(left, #92f396, #44cbec);
        background-clip: text;
        -webkit-text-fill-color: transparent;
        font-size: 0.6rem;
        padding: 0.1rem 0 0.2rem 0;
      }

      .Img {
        background-size: 100% 100%;
        width: 100%;
        padding-bottom: 100%;
      }
    }
  }

  .middle {
    margin-top: 1.4rem;

    .project {
      .title {
        .main {
          font-size: 0.8rem;
          color: #101010;
          height: 1.1rem;
          line-height: 1.1rem;
        }

        .more {
          height: 1rem;
          line-height: 1rem;
          display: inline-block;
          padding: 0 0.15rem 0 0.35rem;
          font-size: 0.6rem;
          border: 1px solid #f46c25;
          border-radius: 0.7rem;
          text-align: center;
          color: #f46c25;
        }
      }

      .titletwo {
        color: #f46c25;
        font-size: 0.6rem;
        padding: 0.1rem 0 0.2rem 0;
      }

      .Img {
        background-size: 100% 100%;
        width: 100%;
        padding-bottom: 100%;
      }
    }

    .new {
      .title {
        .main {
          font-size: 0.8rem;
          color: #101010;
          height: 1.1rem;
          line-height: 1.1rem;
          font-weight: bold;
        }

        .more {
          height: 1rem;
          line-height: 1rem;
          display: inline-block;
          padding: 0 0.15rem 0 0.35rem;
          font-size: 0.6rem;
          color: #f84c3f;
          border: 1px solid #fb43b4;
          border-radius: 0.7rem;
          text-align: center;

          span {
            background-image: -webkit-linear-gradient(left, #fb43b4, #f84c3f);
            background-clip: text;
            -webkit-text-fill-color: transparent;
          }
        }
      }

      .second_title {
        font-size: 0.6rem;
        padding: 0.1rem 0 0.2rem 0;

        .main {
          background-image: -webkit-linear-gradient(left, #4c23fb, #639df4);
          background-clip: text;
          -webkit-text-fill-color: transparent;
        }

        .more {
          display: inline-block;
          background-image: -webkit-linear-gradient(left, #ff3da3, #f84c3f);
          background-clip: text;
          -webkit-text-fill-color: transparent;
        }
      }

      .Img {
        background-size: 100% 100%;
        width: 100%;
        padding-bottom: 100%;
      }
    }
  }

  .bottom {
    margin-top: 1.4rem;

    .workers {
      .title {
        .main {
          font-size: 0.8rem;
          color: #101010;
          height: 1.1rem;
          line-height: 1.1rem;
        }

        .more {
          height: 1rem;
          line-height: 1rem;
          display: inline-block;
          padding: 0 0.15rem 0 0.35rem;
          font-size: 0.6rem;
          color: #7839f2;
          border: 1px solid #7839f2;
          border-radius: 0.7rem;
          text-align: center;
        }
      }

      .titletwo {
        color: #7839f2;
        font-size: 0.6rem;
        padding: 0.1rem 0 0.2rem 0;
      }

      .Img {
        background-size: 100% 100%;
        width: 100%;
        padding-bottom: 100%;
      }
    }

    .hot {
      .title {
        .main {
          font-size: 0.8rem;
          color: #101010;
          height: 1.1rem;
          line-height: 1.1rem;
          font-weight: bold;
        }

        .more {
          height: 1rem;
          line-height: 1rem;
          display: inline-block;
          padding: 0 0.15rem 0 0.35rem;
          font-size: 0.6rem;
          border: 1px solid #4c86ea;
          color: #1821cd;
          border-radius: 0.7rem;
          text-align: center;

          span {
            background-image: -webkit-linear-gradient(left, #4c86ea, #1821cd);
            background-clip: text;
            -webkit-text-fill-color: transparent;
          }
        }
      }

      .second_title {
        font-size: 0.6rem;
        padding: 0.1rem 0 0.2rem 0;

        .main {
          background-image: -webkit-linear-gradient(left, #92f396, #44cbec);
          background-clip: text;
          -webkit-text-fill-color: transparent;
        }

        .more {
          background-image: -webkit-linear-gradient(
            left,
            #ff3da3,
            #ff3da3,
            #ff3da3,
            #f84c3f
          );
          background-clip: text;
          -webkit-text-fill-color: transparent;
          display: inline-block;
        }
      }

      .Img {
        background-size: 100% 100%;
        width: 100%;
        padding-bottom: 100%;
      }
    }
  }
}

// @media screen and (max-width: 320px) {
//   .tapchose {
//     /deep/.van-swipe__indicators {
//       bottom: 30px;
//     }
//   }
// }

.tapchose {
  /deep/.van-swipe__indicators {
    bottom: 7px;
  }
  /deep/.van-swipe__track {
    height: auto;
  }

  /deep/.van-swipe__indicator {
    background-color: #1d5ae8;
  }
}

.banner {
  /deep/.van-swipe__indicator {
    background-color: #1d5ae8;
  }
}

.hot_cont_top {
  display: flex;
  top: -3px;
  align-items: center;
  position: absolute;
  z-index: 3;
  padding-left: 0.5rem;
  width: 80%;
  background: #f2f1f6;
  right: 0;
  height: 55px;

  img {
    width: 20%;
  }

  span {
    font-size: 14px;
    font-weight: 700;
  }
}

.hot_cont {
  display: flex;
  width: 100%;
  margin-bottom: 1.25rem;

  .hot_cont_rig {
    width: 100%;
    padding-left: 0.5rem;
    padding-right: 0.7rem;

    .cont1 {
      font-weight: 700;
      font-size: 0.75rem;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 1;
      -webkit-box-orient: vertical;
    }

    .cont2 {
      font-size: 0.6rem;
      color: rgba(166, 164, 164, 1);
      margin-top: 0.15rem;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }

    .cont3 {
      // margin-top: 7px;
      span {
        color: rgb(29, 90, 232);

        .van-tag:nth-of-type(n + 1) {
          font-size: 10px !important;
          margin: 0.35rem 0.4rem 0 0;
          padding-top: 0.1rem;
        }
      }
    }

    .cont4 {
      margin-top: 0.2rem;
      font-size: 0.8rem;
      font-weight: 700;
      color: rgba(247, 7, 7, 1);
    }

    .cont5 {
      display: flex;
      align-items: center;
      margin-top: 1px;
      font-size: 0.8rem;
      font-weight: 700;

      img {
        margin-left: 0.3rem;
        width: 2.4rem;
        height: 0.8rem;
      }
    }
  }
}

.van-sidebar {
  width: 100%;
  height: 100%;
  background-color: #efeff0;
}

.van-image {
  vertical-align: bottom;
}

/deep/ .van-sidebar-item {
  display: block;
  box-sizing: border-box;
  padding: 1.75rem 0 1.75rem 0px;
  // height: 100%;
  overflow: hidden;
  color: #323233;
  font-size: 0.7rem;
  word-wrap: break-word;
  background-color: #efeff0;
  border-left: 0px solid transparent;
  -webkit-user-select: none;
  user-select: none;
  text-align: center;
}

/deep/ .van-sidebar-item__text {
  width: 100%;
  padding: 0 0.15rem;
  // width: calc(100% - 16px);
}

.van-sidebar-item--select {
  display: flex;
  align-items: center;
  // padding: 0 0 0 16px !important;
  word-wrap: break-word;
  height: 3.5rem;
  color: #323233;
  font-weight: 700;
  background-color: #fff;
  text-align: center;
}

/deep/ .van-list__finished-text {
  height: 1px;
  margin: 1rem 3.5rem 1rem 3.5rem;
  border: 0.02px solid #e8e8e8;
}

.van-search {
  padding: 0.75rem 4%;
}

.van-search .van-cell {
  line-height: 1rem;
  font-size: 0.5rem;
  padding: 0 10px;
  padding-top: 0.26rem;
  padding-bottom: 0.1rem;
  background: #ffffff;
}

.banner {
  text-align: center;
}

.banner .topback {
  // background: #ee3f00;
  padding-bottom: 20%;
  width: 100%;
}

.banner .bottomback {
  padding-bottom: 22%;
  width: 100%;
}

.banner img {
  position: absolute;
  top: 0;
  left: 0.01%;
  width: 100%;
  // border-radius: 0.5rem;
}

/deep/.van-swipe__indicators {
  bottom: 11%;
}

/deep/ .goodscategory {
  margin: 0 0.75rem;

  .goods_name {
    padding-left: 0.3rem;
    font-size: 0.65rem;
    height: 1.25rem;
    line-height: 1.5rem;
    font-weight: bold;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
    text-align: left;
    position: relative;
    color: #323233;
  }

  .goods_price {
    font-weight: bold;
    padding-left: 0.3rem;
    display: inline-block;
    color: #000;
    height: 0.7rem;
    line-height: 0.7rem;
    text-align: left;
  }

  .get_price {
    color: red;
    padding: 0 0.2rem;
    border: 0.2px solid red;
    border-radius: 0.15rem;
    font-size: 0.5rem;
    display: inline-block;
    margin-left: 0.2rem;
    transform: scale(0.8);
    transform-origin: -0.5rem -0.15rem;
  }

  .couter_price {
    display: inline-block;
    font-size: 0.6rem;
    color: #999;
    transform: scale(0.8);
    transform-origin: 0.5rem -1.25rem;
    padding-left: 0.4rem;
    text-decoration: line-through;
  }

  .card:nth-child(odd) {
    padding: 0.3rem 0.3rem 0.3rem 0px !important;
  }

  .card:nth-child(even) {
    padding: 0.3rem 0px 0.3rem 0.3rem !important;
  }

  .goods:nth-child(odd) {
    padding: 0.3rem 0.3rem 0.3rem 0px !important;
  }

  .goods:nth-child(even) {
    padding: 0.3rem 0px 0.3rem 0.3rem !important;
  }

  .goods:nth-child(odd) .box_shadow {
    box-shadow: 0.1rem 0.2rem 0.2rem 0 rgba(0, 0, 0, 0.2);
    border-radius: 0.5rem;
    overflow: hidden;
    position: relative;
  }

  .goods:nth-child(even) .box_shadow {
    box-shadow: -0.1rem 0.2rem 0.2rem 0 rgba(0, 0, 0, 0.2);
    border-radius: 0.5rem;
    overflow: hidden;
    position: relative;
  }

  .goods .box_shadow {
    box-shadow: 0 0.2rem 0.4rem 0 rgba(0, 0, 0, 0.2);
    border-radius: 0.5rem;
    overflow: hidden;
    position: relative;
  }

  .van-tab {
    padding: 0;
  }

  .van-tabs__nav {
    background-color: transparent;
  }

  .van-tabs__content {
    background-color: #fff;
    border-radius: 0 0 0.5rem 0.5rem;
  }

  .van-tabs--card > .van-tabs__wrap {
    border-radius: 0.5rem 0.5rem 0 0;
    height: 3.25rem;
    padding: 0.5rem 0 0.5rem 0;
    background-color: #fff;
  }

  .van-tabs__nav--card {
    margin: 0;
    height: 2.25rem;
    border: 0;
    padding: 0 0.25rem;
  }

  .van-tabs__nav--card .van-tab {
    border-right: 0;
    line-height: 1.1rem;
    font-size: 0.8rem;
    font-weight: bold;
    text-align: center;
  }

  .van-tabs__nav--card .van-tab.van-tab--active {
    color: #fd0404 !important;
    background-color: transparent !important;
  }

  .van-tabs__nav--card .van-tab {
    color: #101010;
    background-color: transparent !important;
  }

  .van-tabs__nav--card .van-tab.van-tab--active .second_title {
    font-size: 0.585rem;
    background-color: #ff5b5b;
    color: #fff !important;
    font-weight: bold;
    border-radius: 1.25rem;
    padding: 0 0.3rem;
    height: 1rem;
    line-height: 1.1rem;
  }

  .van-tabs__nav--card .van-tab .second_title {
    color: #9f9d9d;
    font-size: 0.585rem;
    display: inline-block;
  }
}

.van-search__content {
  border-radius: 0px !important;
  // height: 1.5rem;
  background: #dddddd !important;
}

.van-sidebar-item--select::before {
  background-color: #fff;
}

.van-list {
  overflow: scroll;
  height: calc(100vh - 3.5rem);
}

.van-list::-webkit-scrollbar {
  display: none;
}

.side_scroll {
  overflow: scroll;
  height: 100vh;
}

.side_scroll::-webkit-scrollbar {
  display: none;
}

/*改变img为了暂时区分 */
.merchant-one {
  filter: hue-rotate(90deg);
}

.merchant-two {
  filter: invert(100%);
}

.van-search,
.van-search__content {
  background: #f2f1f6 !important;
}

.van-search .van-cell {
  border: 1px solid #1d5ae8;
  border-radius: 0.5px;
  border-radius: 3px;
}

.article {
  background: white;

  //border-radius: 5px;
  > ul {
    margin: 0 0.85rem;
    overflow: hidden;

    > li {
      // padding: 6px 0;
      display: flex;

      > aside.left {
        background-size: 100% 100%;
        width: 87px;
        height: 87px;
        // margin-top: 10px;
        border-radius: 4px;
        background-repeat: no-repeat;
        box-sizing: border-box;
      }

      > ul.right {
        // flex: 1;
        width: 71%;
        display: flex;
        flex-direction: column;
        align-content: space-between;
        justify-content: space-between;
        // margin-top: 10px;
        // padding-bottom: 5px;
        padding-left: 15px;

        > li {
          p {
            margin: 0;
          }

          .cont4 {
            // margin-left: 6px;
            font-size: 12px;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            display: -moz-box;
            -moz-line-clamp: 2;
            -moz-box-orient: vertical;
            word-wrap: break-word;
            word-break: break-all;
            white-space: normal;

            font-weight: 400;
            color: #7e7b7b;
            // color: red;
          }

          .cont5 {
            margin-bottom: 2px;
            display: flex;
            align-items: center;
            // justify-content: center;
            font-size: 16px;
            font-weight: 600;
            color: #f70707;

            img {
              margin-left: 3px;
              width: 48px;
              height: 16px;
            }
          }

          .re-cont5 {
            height: 100%;
            display: flex;
            align-items: flex-end;
            font-size: 16px;
            font-weight: 600;
            color: #f70707;
          }
        }
      }
    }

    // > li:nth-of-type(1) {
    //   border-bottom: 1px solid #eaeaea;
    // }
    // > li:nth-of-type(2) {
    //   border-bottom: 1px solid #eaeaea;
    // }
    // > li:nth-of-type(3) {
    //   border-bottom: 1px solid #eaeaea;
    // }
  }
}
.bottr {
  border-bottom: 1px solid #eaeaea;
}
</style>
